<!--/**
*碳素云通信录主界面
*@namespace View\Index
*@todo 完成主界面
*@version 1.0
*@copyright 碳素云信息技术有限责任公司<http://tansuyun.cn>
*@author 黄思齐<xiaogeqq1034@tansuyun.cn>
*
*/-->
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>碳素云通信录主界面</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="碳素云通信录主界面">
<meta name="author" content="huangsiq"> 
<script src="./Public/bootstrap-v3.2.0/js/jquery-1.11.1.min.js"></script>
<link href="./Public/bootstrap-v3.2.0/css/bootstrap.css" rel="stylesheet">
<script src="./Public/bootstrap-v3.2.0/js/bootstrap.js"></script>


<style type="text/css">
	
    .profile{
        
        margin-right: 15px;
    }
	.hovercard {
		display: none;
		position: absolute;
		height: 150px;
		padding: 20px 60px 20px 20px;
	}
	
	 </style>

</head>
<body style="font-family:'微软雅黑';">
    <div class="container">
        <!--首页导航条-->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="navbar-header">

                <a class="navbar-brand" href="#"><b>碳素云通信录
                    </b></a>
            </div>
            <div style="margin-right:60px;">
                <p class="navbar-text navbar-right">
                    

                    <b>用户：<a   data-toggle="modal" data-target="#myModal" style="cursor:pointer;">黄思齐</a></b>
                      <b><a   data-toggle="modal" data-target="#myModal"style="cursor:pointer;" >退出</a></b>


          

        </nav>
        <!--首页导航条-END-->
        <div class="row">
        <!--前端部-->
        <div class="col-md-6">
        <div class="panel panel-danger panel-paper" style="margin-top: 100px;">
            <div class="panel-heading">
                <!--标题-->
                <b style="font-size: 16px;">前端部</b>

            </div>




            <div class="panel-body">
                <!--人物信息添加-->
               <img src="./Public/images/userlogo.jpg">
           
                <!--人物信息添加-END-->
            </div>
        </div>
        </div>
        <!--前端部END-->
           <!--后端部-->
           <div class="col-md-6">
        <div class="panel panel-info panel-paper" style="margin-top: 100px;">
            <div class="panel-heading">
                <!--标题-->
                <b style="font-size: 16px;">后端部</b>

            </div>




            <div class="panel-body">
                <!--人物信息添加-->
                            
                               
                                
                                
                   
                            
                                    <img class="profile" name="1" alt="最代码官方的gravatar头像" src="./Public/images/userlogo.jpg">
                                    <img class="profile" name="2" alt="最代码官方的gravatar头像" src="./Public/images/userlogo.jpg">
                                    <img class="profile" name="3" alt="最代码官方的gravatar头像" src="./Public/images/userlogo.jpg">
                                
                                
                                
                
                <!--人物信息添加-END-->
            </div>
        </div>
           </div>
        <!--后端部END-->
        </div>
        
        <div class="hovercard well" id="hovercard_1">
            <div class="hovercontent">
                <div class="right_bar">
                    <div class="user">
                       <foreach name ="back" item ="A">
                           <p>姓名：{$A.UName}</p>
                            <p>电话：{$A.UTelePhoneNumber}</p>
                             <p>QQ：{$A.UQQ}</p>
                              <p>邮箱：{$A.UEmail}</p>
                       </foreach>
                    </div>
                </div>
            </div>
        </div>
        <div class="hovercard well" id="hovercard_2">
            <div class="hovercontent">
                <div class="right_bar">
                    <div class="user">
                        <p>姓名：2齐</p>
                        <p>电话：18281601621</p>
                        <p>QQ:284961640</p>
                        <p>Email:xiaogeqq1034@163.com</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="hovercard well" id="hovercard_3">
            <div class="hovercontent">
                <div class="right_bar">
                    <div class="user">
                        <p>姓名：3</p>
                        <p>电话：18281601621</p>
                        <p>QQ:284961640</p>
                        <p>Email:xiaogeqq1034@163.com</p>
                    </div>
                </div>
            </div>
        </div>
             <!--设计部-->
             <div class="row">
             <div class="col-md-6">
        <div class="panel panel-success panel-paper" >
            <div class="panel-heading">
                <!--标题-->
                <b style="font-size: 16px;">设计部</b>

            </div>




            <div class="panel-body">
                <!--人物信息添加-->
                <img src="./Public/images/userlogo.jpg">
              
                
                <!--人物信息添加-END-->
            </div>
        </div>
             </div>
        <!--设计部END-->
              <!--市场部-->
              <div class="col-md-6">
        <div class="panel panel-primary panel-paper">
            <div class="panel-heading">
                <!--标题-->
                <b style="font-size: 16px;">市场部</b>

            </div>




            <div class="panel-body">
                <!--人物信息添加-->
                 <img src="./Public/images/userlogo.jpg">
               
                
                <!--人物信息添加-END-->
            </div>
        </div>
              </div>
        </div>
        <!--市场部END-->
              <!--管理层-->
              <div class="row">
              <div class="col-md-6">
        <div class="panel panel-info panel-paper" >
            <div class="panel-heading">
                <!--标题-->
                <b style="font-size: 16px;">行政部</b>

            </div>




            <div class="panel-body">
                <!--人物信息添加-->
              <img src="./Public/images/userlogo.jpg">
              
                <!--人物信息添加-END-->
            </div>
        </div>
              </div>
              </div>
        <!--管理部END-->
          
      
      
        <script>
        
     $(function ()
            { $('#example2').tooltip();
                 });
        </script>
        <!-- Modal -->
                <div class="modal fade  bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title" id="myModalLabel">修改用户密码</h4>
                            </div>  
                            <form name="register" action="?s=Home/Index/changeUPassword" method="post" id="register_form" class="">
                                <!--用户名-->

                                <div class="modal-body">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-lock"></span>
                                            </div>
                                            <input name="userPassword" type="password" class="form-control" 
                                                   placeholder="输入您的旧密码" value="" id="inputUid">
                                        </div>
                                    </div>

                                    <!--密码-->
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-lock"></span>
                                            </div>
                                            <input name="newPassword" type="password" class="form-control"
                                                   placeholder="输入您的新密码" value="" id="inputPassword">
                                        </div>
                                    </div>
                                    
                                      <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-lock"></span>
                                            </div>
                                            <input name="rePassword" type="password" class="form-control"
                                                   placeholder="再次输入您的新密码" value="" id="inputrePassword">
                                        </div>
                                    </div>

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-primary">提交</button>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
   
               <foreach name="front" item = 'A'>
                   <p>用户姓名：{$A.UDepartment}</p>
                   <p>用户姓名：{$A.UName}</p>
                    <p>用户电话：{$A.UTelePhoneNumber}</p>
                     <p>用户姓名：{$A.UQQ}</p>
                      <p>用户姓名：{$A.UEmail}</p>
               </foreach>
        
         <foreach name="back" item = 'B'>
                   <p>用户姓名：{$B.UDepartment}</p>
                   <p>用户姓名：{$B.UName}</p>
                    <p>用户电话：{$B.UTelePhoneNumber}</p>
                     <p>用户姓名：{$B.UQQ}</p>
                      <p>用户姓名：{$B.UEmail}</p>
               </foreach>
        
         <foreach name="design" item = 'C'>
                   <p>用户姓名：{$C.UDepartment}</p>
                   <p>用户姓名：{$C.UName}</p>
                    <p>用户电话：{$C.UTelePhoneNumber}</p>
                     <p>用户姓名：{$C.UQQ}</p>
                      <p>用户姓名：{$C.UEmail}</p>
               </foreach>
        
         <foreach name="market" item = 'D'>
                   <p>用户姓名：{$D.UDepartment}</p>
                   <p>用户姓名：{$D.UName}</p>
                    <p>用户电话：{$D.UTelePhoneNumber}</p>
                     <p>用户姓名：{$D.UQQ}</p>
                      <p>用户姓名：{$D.UEmail}</p>
               </foreach>
        
         <foreach name="management" item = 'E'>
                   <p> 用户UID：{$E.UID}</p>
                   <p>用户姓名：{$E.UDepartment}</p>
                   <p>用户姓名：{$E.UName}</p>
                    <p>用户电话：{$E.UTelePhoneNumber}</p>
                     <p>用户姓名：{$E.UQQ}</p>
                      <p>用户姓名：{$E.UEmail}</p>
                      <p></p>
               </foreach>
    
            </div>
                 
   
    <!--container-END-->
    <div class="footer" style="margin-top: 50px;">
        <hr/>
        <!--页脚信息-->
        <div class="text-center">
            Copyright 碳素云信息技术有限责任公司<br/>
            Powered by 碳素云信息技术有限责任公司
            <br/>
        </div>
    </div>
    <script type="text/javascript"> 
                                    
                                           //     var link=".profile";
                                                 var hovercard;
                                                $(function() {
                                                       var timeout;
                                                
                                               $(".profile").hover(function() {
                                                   
                                                   pos = $(this).offset();
                                                    hovercard="#hovercard_"+$(this).attr('name');
                                                    timeout = setTimeout(function() {

                                                        $(hovercard).fadeIn().css({
                                                            'top': pos.top - 70 + 'px',  // subtract 20px to account for padding
                                                           'left': pos.left + 25 + 'px'
                                                       });

                                                   }, 300);

                                               }, function() {
                                                   clearTimeout(timeout);
                                               });
                                                       // console.log(hovercard);
                                                    //
                                                    //      alert(hovercard);
                                               $(".profile").mouseleave(function() {
                                                   $("#hovercard_"+$(this).attr('name')).fadeOut();
                                                });

                                              });
//    alert('ok');
//$(".profile").hover(function(){
//console.log($(this).attr('name'));
////alert($(this).attr('name'));
////hovercard_2
//pos = $(this).offset();
//$("#hovercard_"+$(this).attr('name')).fadeIn().css({
//     'top': pos.top - 70 + 'px',  // subtract 20px to account for padding
//      'left': pos.left + 25 + 'px'
//     });
// });
                                </script>
</body>
</html>
